<template>
  <div>
    <div id="prescription_message_title">&nbsp;&nbsp;
      <span>处方信息</span>
    </div>
    <div id="prescription_message_div">
      <div id="prescription_message_1">
        <div class="prescription_message_1">NO：{{prescription.num}}</div>
        <div class="prescription_message_1">开单时间：{{prescription.time}}</div>
        <div class="prescription_message_1"
             v-if="prescription.status == 1">处方单状态：审核中</div>
        <div class="prescription_message_1"
             v-if="prescription.status == 2">处方单状态：审核通过</div>
        <div class="prescription_message_1"
             v-if="prescription.status == 3">处方单状态：审核未通过</div>
      </div>
      <div id="prescription_message_2">
        <div class="prescription_message_2">医生：{{prescription.doctor}}</div>
        <div class="prescription_message_2">科室：{{prescription.department}}</div>
      </div>
      <div id="prescription_message_3">初步诊断：{{prescription.diagnosis}}</div>
      <div id="prescription_message_4">处理意见：{{prescription.opinion}}</div>
      <div id="prescription_message_5">Rp
        <el-button type="warning"
                   id="look">查看处方二维码</el-button>
      </div>
      <div id="prescription_message_6"
           v-for="(medicine,index) in medicines"
           v-bind:key="index">
        <div class="prescription_message_6">{{medicine.name}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x {{medicine.num}}</div>
        <div class="prescription_message_6">规格：{{medicine.size}}</div>
        <div class="prescription_message_6">{{medicine.instruction}}</div>
      </div>
      <div id="prescription_message_4"
           v-if="prescription.status==3"
           style="color:red">审核不通过原因：{{prescription.comment}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PrescriptionMessage",
  props: {
    prescription: ''
  },
  data () {
    return {
      medicines: []
    }
  },
  created () {
    this.$axios({
      method: "get",
      url: "/prescription/findPrescriptionMedicineByPid",
      params: {
        pid: this.prescription.id
      }
    }).then((res) => {
      this.medicines = res.data.data;
    });
  }
}
</script>

<style scoped>
#prescription_message_title {
  margin-right: 200px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#prescription_message_div {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  overflow: hidden;
}
#prescription_message_1,
#prescription_message_2 {
  float: left;
  width: 100%;
}
.prescription_message_1,
.prescription_message_2 {
  float: left;
  width: 300px;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
#prescription_message_3,
#prescription_message_4,
#prescription_message_5,
#prescription_message_6 {
  float: left;
  width: 90%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
#look {
  float: right;
  margin-right: 10px;
}
</style>
